<template>
    <div id="jiachun" style="width:100%;height: 320px;">
    </div>
</template>
<script>
export default {
  data () {
    return {
      "charts": "",
      "option": {
        "legend": {},
        "tooltip": {},
        "dataset": {
          "source": [
            ['product', '5月', '6月', '7月'],
            ['甲醇', 491.1, 610.4, 425.1],
            ['芳香烃', 486.5, 352.1, 515.7],
            ['乙烯', 324.1, 667.2, 620.5]
          ]
        },
        "xAxis": [
          {
            "type": 'category',
            "gridIndex": 0
          }
        ],
        "yAxis": [
          {
            "gridIndex": 0,
            "name": "单位/吨"
          }
        ],
        "grid": [
          {
            "bottom": '15%'
          },
          {
            "top": '45%'
          }
        ],
        "series": [
          {
            "type": 'bar',
            "seriesLayoutBy": 'row'
          },
          {
            "type": 'bar',
            "seriesLayoutBy": 'row'
          },
          {
            "type": 'bar',
            "seriesLayoutBy": 'row'
          }
        ]
      }
    };
  },
  methods: {
    drawPie (id) {
      this.charts = echarts.init(document.getElementById(id), 'dark');
      this.charts.setOption(this.option);
    }
  },
  mounted () {
    this.drawPie('jiachun');
  }
};
</script>
<style scoped>
    .perth4{
        line-height: 35px;
    }
    .btm0 div{
        padding-bottom: 0!important;
    }
</style>